<!-- 个人信息 -->
<template>
  <div>
    <el-row :gutter="10" class="change_avater">
      <el-col :span="6">
        <el-upload
          class="avatar-uploader"
          :action="filePath"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :headers="{'token':token}"
        >
          <img v-if="iconUrl" :src="iconUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-col>
    </el-row>
    <div>
      <div class="base_info_head">
        <div>基本信息</div>
        <div @click="changeEdit()">
          <el-button type="primary" size="small"
            ><i class="el-icon-edit"></i>编辑</el-button
          >
        </div>
      </div>
      <div class="base_info_content" v-if="edit">
        <el-form :model="formData" label-width="80px">
          <el-form-item label="用户昵称">
            <el-input v-model="formData.nickname"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="formData.gender">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="学号">
            <el-input v-model="formData.student_number"></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="formData.telephone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="formData.email"></el-input>
          </el-form-item>
          <el-form-item label="所在学校">
            <el-input v-model="formData.school"></el-input>
          </el-form-item>
          <el-form-item label="所在班级">
            <el-input v-model="formData.classes"></el-input>
          </el-form-item>
          <el-form-item label="入学时间">
            <el-date-picker
              v-model="formData.admission_time"
              type="date"
              placeholder="date"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-date-picker
              v-model="formData.birthday"
              type="date"
              placeholder="date"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" plain @click="changeEditFalse"
              >取消</el-button
            >
            <el-button type="danger" @click="updateBaseInfo()">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="base_info_show" v-else>
        <ul>
          <li>
            <div class="content_show_l">用户昵称</div>
            <div class="content_show_r">{{ formData.nickname }}</div>
          </li>
          <li>
            <div class="content_show_l">
              <div>姓</div>
              <div>别</div>
            </div>
            <div class="content_show_r">
              <div v-if="formData.gender === 1">男</div>
              <div v-else>女</div>
            </div>
          </li>
          <li>
            <div class="content_show_l">
              <div>学</div>
              <div>号</div>
            </div>
            <div class="content_show_r">{{ formData.student_number }}</div>
          </li>
          <li>
            <div class="content_show_l">联系电话</div>
            <div class="content_show_r">{{ formData.telephone }}</div>
          </li>
          <li>
            <div class="content_show_l">
              <div>邮</div>
              <div>箱</div>
            </div>
            <div class="content_show_r">{{ formData.email }}</div>
          </li>
          <li>
            <div class="content_show_l">所在学校</div>
            <div class="content_show_r">{{ formData.school }}</div>
          </li>
          <li>
            <div class="content_show_l">所在班级</div>
            <div class="content_show_r">{{ formData.classes }}</div>
          </li>
          <li>
            <div class="content_show_l">入学时间</div>
            <div class="content_show_r">{{ formData.admission_time }}</div>
          </li>
          <li>
            <div class="content_show_l">出生日期</div>
            <div class="content_show_r">{{ formData.birthday }}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iconUrl: "",
      filePath:'http://localhost:8080/renren-fast/stu/personInfo/uploadIcon',
      token:this.$cookie.get('token'),
      formData: {
        nickname: "admin",
        gender: 1,
        student_number: "",
        telephone: "",
        email: "",
        school: "",
        classes: "",
        admission_time: "",
        birthday: "",
      },
      edit: false,
    };
  },
  created() {
    this.getBaseInfo();
  },
  methods: {
    //得到基本信息数据
    getBaseInfo() {
      this.$http({
        url: this.$http.adornUrl("/stu/personInfo/baseInfo"),
        method: "get",
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.formData = data.data;
           if(data.data.head_icon){
          this.iconUrl = this.$http.adornUrl(`/${data.data.head_icon}`)
          }
        } else {
          this.$message(data.msg);
        }
      });
    },
    //可以编辑
    changeEdit() {
      this.edit = true;
    },
    //不可编辑
    changeEditFalse() {
      this.edit = false;
    },
    //更新基本信息数据
    updateBaseInfo() {
      this.$http({
        url: this.$http.adornUrl("/stu/personInfo/updateInfo"),
        method:'post',
        data: this.$http.adornData({
          nickname: this.formData.nickname,
          gender: this.formData.gender,
          student_number: this.formData.student_number,
          telephone: this.formData.telephone,
          email:this.formData.email,
          school: this.formData.school,
          classes:this.formData.classes,
          admission_time: this.formData.admission_time,
          birthday:this.formData.birthday,
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.edit = false;
        } else {
          this.$message(data.msg);
        }
      });
    },

        //上传成功后
    handleAvatarSuccess(res){
       let icon  = res.filePath
       this.$http({
         url:this.$http.adornUrl('/stu/personInfo/saveIcon'),
         method:'post',
         data:this.$http.adornData({
           iconUrl: icon
         })
       }).then(({data})=>{
          if(data&&data.code === 0){
             this.iconUrl= this.$http.adornUrl(`/${icon}`)
          }else{
             this.$message(data.msg)
          }
       })
    }
   
  },
};
</script>

<style  scoped>
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  border-radius: 5px;
  font-size: 22px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.base_info_head {
  height: 48px;
  line-height: 48px;
  font-size: 18px;
  font-weight: 600px;
  color: #2e2e2e;
  padding-left: 16px;
  padding-right: 40px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f2;
}
.base_info_content {
  padding: 16px;
}
.base_info_show ul li {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 22px;
  display: flex;
}
.change_avater {
  margin-bottom: 40px;
}
.content_show_l {
  width: 56px;
  color: #555666;
  margin-right: 40px;
  display: flex;
  justify-content: space-between;
}
.content_show_r {
  color: #222226;
  word-break: break-all;
}
.el-form-item {
  width: 500px;
}
</style>
